<script setup>
// import axios from "axios";

import { ref, onMounted } from "vue";
import { queryAllDepts,addDept,getDeptById,editDept,deleteById } from '@/api/dept';
import { ElMessage ,ElMessageBox} from "element-plus";

// 定义数据的地方
const dialogTitle=ref("新增部门");
const dialogFormVisible = ref(false);
const deptFormRef =ref(null);
const formRules=ref({
    name:[
      {required: true,message:'请输入部门名称！',trigger:'blur'},
       { min: 3, max: 5, message: '长度必须在三到五个字！', trigger: 'blur' },
    ]
})
const form =ref({
  name:""
})
// 新增部门的逻辑
function showAddWin() {
  dialogFormVisible.value=true;
  form.value={ name:""};
  dialogTitle.value="新增部门";
  }
const tableData = ref([]);
onMounted(() => {
  search();
});
const search = async () => {
  const result = await queryAllDepts();
  if (result.code == 1) {
    tableData.value = result.data;
  }
}
// 保存部门的处理逻辑
 function save(){
//表单校验
deptFormRef.value.validate(async valid=>{
  if(!valid){
    return;
  }

  let result;
if(form.value.id){
   result = await editDept(form.value);
}else{
   result = await addDept(form.value);
}
  if(result.code==1){
    ElMessage.success("保存成功");
    dialogFormVisible.value=false;
    search();
  }else{
    ElMessage.error("保存失败");
  }

});



}

const handleEdit =async(index,row) => {
  const result=await getDeptById(row.id);
  if(result.code == 1){
    form.value = result.data;
    dialogFormVisible.value =true;
    dialogTitle.value="修改部门"

  }
  console.log("见鬼了")
};

const handleDelete = (row) => {
//先确认
ElMessageBox.confirm("此操作将永久删除该部门, 是否继续?", "提示", {
  confirmButtonText: "确定",
  cancelButtonText: "取消",
  type: "warning",
}).then(async () => {
  // 删除
  const result = await deleteById(row.id);
  if (result.code == 1) {
    ElMessage.success("删除成功");
    search();
  } else {
}
})

 
};


</script>

<template>
  <el-button type="primary" @click="showAddWin">
    新增部门
  </el-button>

  <el-dialog v-model="dialogFormVisible" :title='dialogTitle' width="500">
    <el-form :model="form" :rules="formRules" ref="deptFormRef">
      <el-form-item label="部门名称"  prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" type="index" label="序号" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="updateTime" label="最后操作时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete( scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<style scoped></style>
